// https://www.jianshu.com/p/ce8ca875c337


<!-- 

    inheritAttrs：false，组件不会把未注册的props呈现为普通的HTML属性
    $attrs： 包含父作用域的属性绑定（class、style以及props接收的除外）

 -->




<template>
    <div style="padding:50px;">
        <childcom :name="name" :age="age" :sex="sex"></childcom>
    </div>
</template>
<script>
    export default {
        'name': 'test',
        props: [],
        data() {
            return {
                'name': '张三',
                'age': '30',
                'sex': '男'
            }
        },
        components: {
            'childcom': {
                template: `<div>
                <div>{{name}}</div>
                <grandcom v-bind="$attrs"></grandcom>    // 由于props中接收了name，所以$attrs表示[age,sex]
            </div>`,
                props: ['name'],
                components: {
                    'grandcom': {
                        template: `<div>{{$attrs}}</div>`,
                    }
                }
            }
        }
    }
</script>